<template>
	<view>
		<scroll-view v-if="cloudList.length> 0" scroll-y :style="{ height: '100vh' }" class="scrollView">
			<view class="top">
				库存总数:{{number}}
			</view>
			<view class="recommend">
				<view v-for="(item, index) in cloudList" :key="index" class="recommendi">
					<view class="number">
						商品编号: {{ item.goodId }}
					</view>
					<view class="item">
						<image :src="baseImgUrl + item.goodImg"></image>
						<view class="itemInfo">
							<view>{{ item.goodName }}</view>
							<view>云库存:{{ item.goodInventory }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<Empty v-else />
	</view>
</template>

<script>
	import mineApi from "@/api/mine";
	import {
		baseImgUrl
	} from "@/config";
	export default {
		data() {
			return {
				cloudList: [],
				baseImgUrl,
				number: 0
			}
		},
		onLoad(o) {
			if (o.userId) {
				this.getAgencyInventory(o.userId)
			}
			if (o.stockCount) {
				this.number = o.stockCount
			}
		},
		methods: {
			getAgencyInventory(userId) {
				mineApi.agencyInventory({
					userId
				}).then((res) => {
					this.cloudList = res.rows
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		background-color: #fff;
		margin: 30rpx;
		height: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.scrollView {
		width: 100%;
		padding: 0 30rpx 90rpx;
		overflow-y: scroll;

		.recommend {
			width: 100%;
			height: 100%;

			.recommendi {
				width: 100%;
				margin: 20rpx 0;
				padding: 15px;
				background-color: #fff;
				border-radius: 8px;
				box-sizing: border-box;

				.number {
					display: flex;
					align-items: center;

					.checkbox {
						display: flex;
						justify-items: center;
						align-items: center;
						width: 22px;
						height: 22px;
						// border: 2rpx solid rgba(0, 0, 0, 0.6);
						// border-radius: 50%;
						margin: 0 24rpx 0 8rpx;

						&.selected {
							// padding: 2rpx;
							border: none;
							// background: linear-gradient(to right, #FEEF3C, #F3CD34);

							.selected-icon {
								margin: 2rpx;
								color: #fff !important;
							}
						}
					}
				}

				.quota {
					display: flex;
					color: #ff4254;
					height: 35px;
					align-items: center;
					width: 100%;

					.quotai {
						padding-left: 5rpx;
					}
				}

				.item {
					width: 100%;
					height: 80px;
					display: flex;
					align-items: center;

					image {
						width: 65px;
						height: 65px;
					}

					.itemInfo {
						color: #000;
						font-weight: 500;
						display: flex;
						flex-direction: column;
						height: 65px;
						justify-content: space-between;
						margin-left: 10px;
						font-size: 17px;
					}
				}

				.price {
					display: flex;
					width: 100%;
					height: 90px;
					margin-top: 8px;
					background-color: #f8f8f8;
					border-radius: 8px;
					justify-content: space-around;
					align-items: center;

					.pricei {
						text-align: center;

						.pricei_Num {
							color: #000;
							font-weight: 600;
							font-size: 18px;
						}

						.pricei_text {
							color: #c6c4c4;
							font-size: 26rpx;
							padding-top: 5rpx;
						}
					}
				}

				.button {
					display: flex;
					width: 100%;
					justify-content: space-between;

					.buttoni {
						border: 1px solid #ff4254;
						border-radius: 5px;
						padding: 5px 8px;
						margin-top: 15px;
						color: #ff4254;
					}

					.button-empty {
						border: 1px solid #c6c4c4;
						border-radius: 5px;
						padding: 5px 8px;
						margin-top: 15px;
						color: #c6c4c4;
					}
				}
			}
		}
	}
</style>